<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { DataViewInstance, fmtDate, hBtns, hStatusTag, KeyValues, openDialog, request, statusSelect, TableColumnProps } from '../../../utils';
import { ElMessage } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const tableRef = ref<DataViewInstance>()
const dictList = ref<KeyValues<any>[]>([])

const columns = [
  { label: '数据标签', prop: 'label' },
  { label: '数据值', prop: 'value' },
  { label: '数据排序', prop: 'sort' },
  {
    label: '状态',
    render: (_, { row }) => hStatusTag(row.status)
  },
  { label: '备注', prop: 'remark', minWidth: 170 },
  {
    label: '创建时间',
    minWidth: 170,
    render: (h, { row }) => h('span', fmtDate(row.createAt))
  },
  {
    label: '操作',
    width: 120,
    fixed: 'right',
    render: (_, { row }) => {
      return hBtns([
        { label: '修改', onClick: onEdit.bind(null, row) },
        { label: '删除', onClick: onDelete.bind(null, [row]) }
      ])
    }
  }
] as TableColumnProps<any>[]

const fetchAction = (params: any) => {
  return request('/dict_data/listByPage', { params })
}

const onEdit = (row?: any) => {
  const { dictId } = tableRef.value?.listData.form as KeyValues<any>
  const dict = dictList.value.find(_ => _._id === dictId)
  if (!dict) return ElMessage.warning('字典不存在，不能创建字典数据')
  openDialog({
    vm: () => import('./data-edit.vue'),
    vmProps: { row, dict },
    dialogProps: {
      title: row ? '编辑' : '新增',
      onSubmitted: () => tableRef.value?.getData()
    }
  })
}

const onDelete = (rows: any[]) => {
  tableRef.value?.deleteRows(
    () => request.post('/dict_data/delete', { ids: rows.map(_ => _._id) })
  )
}

onMounted(async () => {
  request('/dict/all').then(({ data }) => {
    dictList.value = data
  })
  await tableRef.value?.setInitForm({
    dictId: route.params.id
  })
  tableRef.value?.getData()
})
</script>

<template>
  <UiDataView
    ref="tableRef"
    :columns="columns"
    :fetch-action="fetchAction"
    :config="{ selection: true }">
    <template #form="{ form, onSearch }">
      <ElFormItem label="字典名称">
        <ElSelect filterable v-model="form.dictId" @change="onSearch">
          <ElOption v-for="_ in dictList" :key="_._id" :value="_._id" :label="_.dictName" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="数据标签">
        <ElInput placeholder="请输入数据标签" v-model="form.label" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="状态">
        <ElSelect clearable v-model="form.status" @change="onSearch">
          <ElOption v-for="_ in statusSelect" :key="_.value" v-bind="_" />
        </ElSelect>
      </ElFormItem>
    </template>
    <template #actions="{ selectedRows }">
      <ElButton plain type="primary" :icon="Plus" @click="onEdit()">新增</ElButton>
      <ElButton
        plain
        type="danger"
        :icon="Delete"
        :disabled="selectedRows.length < 1"
        @click="onDelete(selectedRows)">删除</ElButton>
    </template>
  </UiDataView>
</template>
